import React, { Component } from 'react'
import { DetailListContainer } from './TeslaStyle'
import {withRouter} from 'react-router-dom'


@withRouter
class TeslaList extends Component {
    goToDetail=(id)=>{
            console.log(id)
            this.props.history.push(`/detail/${id}`)
    }
    render() {
        // console.log(this.props.list)
        
        return (
            <div style={
                {
                    flex: 1,
                    overflow: 'scroll'
                }
            }>
                <DetailListContainer>
                    <ul>
                        {
                            this.props.list.map(item => {
                                return <li key={item.tid} onClick={()=>this.goToDetail(item.tid)}>
                                    <h1>{item.title}</h1>
                                    <div className="context">
                                        <div className="icon">
                                            {item.tag[0]== 'top' && <span className="top">{item.tag[0] == 'top' ? '置顶' : ''}</span>}
                                            <i>
                                                <img src={item.userBaseInfo.userAvatar} alt="" />
                                            </i>
                                            <b>{item.userBaseInfo.userName}</b>
                                        </div>
                                        <div className="time">
                                            <span>{item.lastUpdateTime}</span>
                                        </div>
                                        <div className="like">
                                            <span>{item.praisedCount}</span>
                                            <i className='yo-ico'>&#xe666;</i>
                                            <span>{item.commentsCount}</span>
                                            <i className='yo-ico'>&#xe7f5;</i>

                                        </div>
                                    </div>
                                </li>
                            })
                        }
                    </ul>
                </DetailListContainer>
            </div>
        )
    }
}

export default TeslaList